<template>
    <view class="w-[100%] relative">
        <image src="@/static/images/index_bg/bg_index.png" class="w-[100%] h-[396rpx] z-[-1] absolute top-0" />
        <z-paging :empty-view-error-text="`对不起,页面走丢了\n请刷新试试`" :empty-view-text="`暂无宠物请点击下方添加`" empty-view-img="/static/images/index_bg/cwww.png"  empty-view-center ref="paging" v-model="list"
            @query="queryList" :fixed="true" width="100%" height="100%" >
            <template>
                <up-navbar title="" :autoBack="false" placeholder bgColor="rgba(255,255,255,0)">
                    <template #left>
                        <text class="text-[34rpx] text-[#000] font-[500]">我的宠物</text>
                    </template>
                </up-navbar>
            </template>
            <view class=" wwww">
                <view v-for="(pet, index) in list" :key="index"
                    class="rounded-[24rpx] relative h-[246rpx] pt-[26rpx] flex flex-col items-center"
                    style="border: 2rpx solid #FFFFFF;"
                    @click="goToPetDetail(pet.id)">  <!-- 添加点击事件 -->
                    <view class="relative">
                        <!-- 宠物头像 -->
                        <image :src="pet.avatar" class="w-[96rpx] h-[96rpx]" style="border-radius: 50%;"></image>
                        <!-- 性别图标 -->
                        <image
                            :src="pet.sex === 0 ? '/static/images/game_logo/man.png' : '/static/images/game_logo/woman.png'"
                            class="w-[40rpx] h-[40rpx]" style="position: absolute;right: -80rpx; top: 0;"></image>
                    </view>
                    <!-- 宠物名称和年龄 -->
                    <view class="mt-[10rpx] text-[#000000] font-[500] font-[PingFang SC] text-[28rpx]">
                        {{ pet.name }}·{{ calculateAge(pet.birthday) }}年
                    </view>
                    <!-- 设备信息 -->
                    <view class="text-[22rpx] flex text-[#666666] items-end mt-[12rpx]">
                        当前设备电量 | <battery class="w-[52rpx] h-[26rpx]" :size="2" :value="10"></battery>10%</view>
                    
                </view>
                

            </view>

            <template #bottom>
                <!-- 添加按钮 -->
                <view @click="push('/pages_cw/addpets/addpets')"
                    class=" text-[#000000] flex justify-center mb-[32rpx]"
                   >
                    <image src="@/static/images/img/tj.png" class="w-[538rpx] h-[108rpx]"></image>
                </view>
                <tabBar />
            </template>
        </z-paging>
    </view>


</template>

<script setup>
import {
    onShow
} from '@dcloudio/uni-app'
import {
    ref
} from 'vue'
import useUserStore from '@/store/modules/user';
import { getPetList } from '@/api/pet'
const userStore = useUserStore();

const list = ref([]);
const paging = ref(null);
const queryList = async (pageNum, pageSize) => {
	try {
		const from = {
			pageNum: pageNum,
			pageSize: pageSize,
            uid: userStore.userId
		};
		const { rows } = await getPetList(from);
		paging.value.complete(rows);
	} catch (e) {
		console.log('报错=>', e);
		//TODO handle the exception
		paging.value.complete(false);
	}
};

// 计算宠物年龄
const calculateAge = (birthday) => {
    if (!birthday) return 0;
    const birthDate = new Date(birthday);
    const currentYear = new Date().getFullYear();
    return currentYear - birthDate.getFullYear();
}

// 跳转到宠物详情页
const goToPetDetail = (id) => {
    if (!id) return;
    uni.navigateTo({
        url: `/pages_cw/petdetails/petdetails?id=${id}`
    });
};

// 刷新页面数据
onShow(() => {
    // 每次页面显示时刷新数据联合z-pading实现刷新
    if (paging.value) {
        paging.value.reload();
    }
})
</script>

<style lang="scss" scoped>
.wwww {
    padding-left: 40rpx;
    padding-right: 40rpx;
    width: 100%;
    margin-top: 42rpx;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24rpx 22rpx; //上右下左的间隙和marjin一样
}
</style>
